<template>
  <div class="center">
    <div class="head">
      <div class="box">
        <div class="box-left">
          <img @click="homeChange" src="../images/lucency-logo.png" alt />
        </div>
        <div class="box-wier"></div>
        <div class="box-centent">数字人备案存证</div>
        <div class="box-right">
          <div class="box-right-hint" @click="loginLith">
            <img src="../images/hint.png" alt />
            <div class="box-right-hint-num" v-if="msgTotal>0">{{ msgTotal>9? '···':msgTotal }}</div>
          </div>
          <p @click="loginChange" v-if="!nickname">用户名</p>
          <p @click="loginChange" v-if="nickname">{{ nickname }}</p>
          <div class="box-right-img">
            <img @click="loginChange" v-if="!avatar" src="../images/picture.png" alt height="100%" />
            <img @click="loginChange" v-if="avatar" :src="avatar" alt height="100%" />
          </div>
        </div>
      </div>
    </div>

    <div class="main">
      <div class="main-box">
        <div id="copy_id" style="height:0;"></div>
        <div class="navigation">
          <p style="cursor: pointer;" @click="routerGo">返回上一级</p>
          <img src="../images/right-arrow.png" alt />
          <p>详情</p>
        </div>
        <div class="datum">
          <div class="datum-swpier">
            <!-- <img src="../images/portrait.jpg" alt /> -->
            <el-carousel
              :interval="2000"
              :initial-index="1"
              :autoplay="false"
              arrow="never"
              ref="carousel"
              prev="prevChange"
              height="409px"
              indicator-position="none"
            >
              <el-carousel-item v-for="(item,index) in swpierVal" :key="index">
                <img :src="item" alt width="100%" />
              </el-carousel-item>
            </el-carousel>

            <div class="datum-swpier-left" @click="handel('prev')">
              <img src="../images/left.png" alt />
            </div>
            <!-- <div class="datum-swpier-center">
              <img src="../images/id-logo.png" alt />
            </div>-->
            <div class="datum-swpier-right" @click="handel('next')">
              <img src="../images/right.png" alt />
            </div>
          </div>
          <!-- youbiain -->
          <div class="datum-box">
            <div class="name">
              <div class="name-text">
                <div class="name-text-name">{{ info.name }}</div>
                <div class="name-text-digit">{{ info.attrName }}</div>
              </div>
              <div class="name-message">
                <div class="share">
                  <img
                    @click="shareShow=!shareShow"
                    v-show="!shareShow"
                    src="../images/share1.png"
                    alt
                  />
                  <img
                    @click="shareShow=!shareShow"
                    v-show="shareShow"
                    src="../images/share2.png"
                    alt
                  />
                  <div class="share-box" v-show="shareShow">
                    <div class="share-box-item" @click="copy(1)">
                      <img src="../images/link.png" alt />
                      复制分享连接
                    </div>
                    <div class="share-box-item" @click="copy(1)">
                      <img src="../images/we-chat-logo.png" alt />
                      分享到微信
                    </div>
                    <div class="share-box-item" @click="copy(1)">
                      <img src="../images/qq.png" alt />
                      分享到QQ
                    </div>
                    <div class="share-box-item" @click="copy(2)">
                      <img src="../images/qq-space.png" alt />
                      分享到QQ空间
                    </div>
                    <div class="share-box-item" @click="copy(3)">
                      <img src="../images/microblog.png" alt />
                      分享到微博
                    </div>
                  </div>
                </div>
                <div class="name-message-img">
                  <img v-if="!imgShow" @click="collectChange" src="../images/collect.png" alt />
                  <img v-if="imgShow" @click="coldeChange" src="../images/collect-action.png" alt />
                </div>
                <div class="name-message-but" @click="show_edg">给TA留言</div>
              </div>
            </div>
            <div class="wier"></div>
            <div class="id">ID: {{ info.cardNo }}</div>
            <div class="item">
              <div class="item-box">
                <p>性别：</p>
                <p>{{info.sexName}}</p>
              </div>
              <div class="item-box">
                <p>生日：</p>
                <p>{{ info.birthday }}</p>
              </div>
            </div>

            <div class="item">
              <div class="item-box">
                <p>年龄：</p>
                <p>{{ age }}</p>
              </div>
              <div class="item-box">
                <p>地区：</p>
                <p>{{provinceName}}</p>
              </div>
            </div>

            <div class="item">
              <div class="item-box">
                <p>形象已发布平台：</p>
                <p style="color:#3C7BD8;">
                  <!-- {{ info.platformNames}} -->
                  <span
                    class="my-info-looks-tint"
                    style="margin-right:10px"
                    @click="open_url(item.platformUrl)"
                    :style="item.platformUrl!=''&&item.platformUrl!=null?'border-bottom: 1px solid #3a7bd8;cursor: pointer;':''"
                    v-for="item,index in info.peopleRelevanceList"
                    :key="index"
                  >
                    {{item.name}}
                    <template v-if="info.peopleRelevanceList.length-1 != index">、</template>
                  </span>
                </p>
              </div>
              <div class="item-box">
                <p>所在行业：</p>
                <p>{{ info.industryNames }}</p>
              </div>
            </div>

            <div class="item">
              <div class="item-box">
                <p>驱动方式：</p>
                <p>{{ info.actuateNames }}</p>
              </div>
            </div>
            <div class="wier" style="margin-top: 30px;margin-bottom: 30px;"></div>
            <div class="item">
              <div class="item-box">
                <p>是否接受授权：</p>
                <p>{{ info.accreditValue }}</p>
              </div>
              <div class="item-box">
                <p>是否接受转让：</p>
                <p>{{ info.copyrightValue }}</p>
              </div>
            </div>
            <div class="wier" style="margin-top: 30px;margin-bottom: 30px;"></div>
            <div class="item">
              <div class="item-big">
                <p>TA的介绍：</p>
                <p>{{ info.content }}</p>
              </div>
            </div>
            <div class="wier" style="margin-top: 30px;margin-bottom: 30px;"></div>
            <div class="item-user">
              <div class="item-user-img">
                <img :src="info.avatar" alt />
              </div>
              <div class="item-user-text">
                <p>{{ info.nickname }}</p>
                <p>{{info.views }}人浏览 · {{info.collectNums}}次收藏</p>
              </div>
            </div>
            <div class="wier" style="margin-top: 30px;margin-bottom: 30px;"></div>

            <div class="leave-word">
              <div class="leave-word-title">TA的留言</div>
              <div class="leave-word-down" v-for="(item,index) in rows" :key="index">
                <div class="leave-word-down-img">
                  <img :src="item.avatar" alt />
                </div>
                <div class="leave-word-down-text">
                  <p>
                    <span>{{ item.nickname }}</span>
                    <span>{{ item.createTime }}</span>
                  </p>
                  <p>{{ item.content }}</p>
                </div>
              </div>
              <div style="display: flex;justify-content: center;padding-bottom: 20px;">
                <el-pagination
                  @current-change="handleCurrentChange"
                  :hide-on-single-page="true"
                  background
                  :page-size="10"
                  layout="total, prev, pager, next"
                  :total="total"
                ></el-pagination>
              </div>

              <!-- <div class="leave-word-down">
                <div class="leave-word-down-img">
                  <img src="../images/profile-photo.png" alt />
                </div>
                <div class="leave-word-down-text">
                  <p>张晓月</p>
                  <p>
                    运用数字技术创造出来的、与人类形象接近的数字化人物形象。
                    狭义的数字人是信息科学与生命科学融合的产物，是利用信息科学的方法对人体在不同水平的形态和功能进行虚拟仿真。
                  </p>
                </div>
              </div>-->
            </div>
          </div>
        </div>
      </div>
      <div class="main-their">中国数字人知识产权存证保护平台</div>
    </div>

    <div class="pop" v-show="show">
      <div class="pop-box">
        <div class="pop-box-close">
          <img @click="show=!show" style="cursor: pointer;" src="../images/close.png" alt />
        </div>
        <div class="pop-box-title">给TA留言</div>
        <div class="pop-box-input">
          <el-input
            type="textarea"
            :autosize="{ minRows: 12, maxRows: 12}"
            placeholder="请输入内容"
            size="mini  "
            v-model="textarea"
            rows="1"
            resize="none"
          ></el-input>
        </div>
        <div class="pop-box-hint">
          <img src="../images/mistake2.png" alt />
          <p>温馨提示</p>
          <p>您输入的信息所有人均可看见，鉴于隐私保护考虑，留言内容中，请勿夹带个人信息，如手机号、家庭住址等~</p>
        </div>
        <div class="pop-box-but" @click="infoChange">确定</div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getDetails,
  addCollect,
  people_del,
  addComment,
  getMessage,
  comment_total
} from "@/utils/api";
import { toQQzone, toQQ, toWeibo, toWechat } from "@/utils/share.js";
export default {
  name: "personalView",
  components: {},
  data() {
    return {
      show: false,
      textarea: "",
      id: "",
      swpierVal: [],
      info: {},
      provinceName: "",
      age: "",
      imgShow: false,
      peopleId: "",
      rows: [],
      avatar: "",
      nickname: "",
      msgTotal: "",
      shareShow: false,
      total: 0, //评论总条数
      page: 1
    };
  },
  created() {
    //获取留言条数
    if (localStorage.getItem("token")) {
      comment_total({}, res => {
        localStorage.setItem("msgTotal", res.data);
      });
    }
    if (localStorage.getItem("token")) {
      this.avatar = localStorage.getItem("avatar");
      this.nickname = localStorage.getItem("nickname");
      this.msgTotal = localStorage.getItem("msgTotal");
    }
    document.documentElement.scrollTop = 0;
    var params = new URLSearchParams(window.location.search);
    if (params.get("id")) {
      this.id = params.get("id");
    } else {
      this.id = localStorage.getItem("digitalID");
    }
    this.init();
  },
  methods: {
    // 给他留言
    show_edg() {
      if (this.info.isSelf) {
        this.$message.error("不可以给自己留言哦~~~");
      } else {
        this.show = !this.show;
      }
    },
    init() {
      // 数字人详情信息
      getDetails({ id: this.id }, res => {
        if (res.code === 200) {
          this.swpierVal.push(res.data.imgLeft45);
          this.swpierVal.push(res.data.imgUrl);
          this.swpierVal.push(res.data.imgRight45);
          console.log(this.swpierVal);
          this.info = res.data;
          this.provinceName = res.data.subjectInfo.provinceName;
          this.imgShow = res.data.isCollect;
          this.onPickChange(res.data.birthday);
        }
        console.log(res);
      });
      // 获取留言列表
      getMessage({ peopleId: this.id }, res => {
        this.rows = res.rows;
        this.total = res.total;
      });
    },
    handleCurrentChange(val) {
      // 获取留言列表
      getMessage({ peopleId: this.id, pageNum: val, pageSize: 10 }, res => {
        this.rows = res.rows;
        this.total = res.total;
      });
    },
    onPickChange(e) {
      let date = new Date();
      let year = date.getFullYear();
      let m = date.getMonth() + 1;
      console.log("月", m);
      if (year == e.split("-")[0]) {
        console.log("年龄相等");
        this.age = m - e.split("-")[1] + "个月";
      } else {
        this.age = year - e.split("-")[0] + "岁";
      }
    },
    handel(row) {
      if (row == "next") {
        this.$refs.carousel.next();
      } else {
        this.$refs.carousel.prev();
      }
    },
    //  收藏
    collectChange() {
      addCollect({ peopleId: this.id }, res => {
        if (res.code === 200) {
          this.imgShow = true;
        }
      });
    },
    // 取消收藏
    coldeChange() {
      people_del({ id: this.id }, res => {
        if (res.code === 200) {
          this.imgShow = false;
        }
      });
    },
    // 留言
    infoChange() {
      console.log(132);
      addComment({ peopleId: this.id, content: this.textarea }, res => {
        if (res.code === 200) {
          this.show = false;
          this.textarea = "";
          getMessage({ peopleId: this.id }, res => {
            this.rows = res.rows;
            console.log(res);
          });
          this.$message({
            message: "留言成功",
            type: "success"
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error"
          });
        }
        console.log(res);
      });
    },
    homeChange() {
      this.$router.push({ name: "home" });
    },
    loginChange() {
      var token = localStorage.getItem("token");
      if (token) {
        this.$router.push({ name: "datum" });
      } else {
        this.$message({
          message: "请登录",
          type: "erroe"
        });
        setTimeout(() => {
          this.$router.push({ name: "login" });
        }, 1200);
      }
    },
      loginLith(){
      this.$router.push({ name: "datum" ,params:{id:2}});
    },
    // 返回上一级
    routerGo() {
      this.$router.go(-1);
    },
    // 复制连接
    copy(index) {
      // console.log(window.location.href);
      var url =
        "中国数字人知识产权存证保护平台【官方认证】 " +
        this.info.name +
        " " +
        window.location.href;
      if (index == 1) {
        let oInput = document.createElement("input");
        oInput.value = url;
        oInput.style.opacity = 0;
        // document.body.appendChild(oInput);
        document.getElementById("copy_id").appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value);
        document.execCommand("Copy"); // 执行浏览器复制命令
        this.$message({
          message: "复制成功",
          type: "success"
        });
      } else if (index == 2) {
        toQQzone(
          window.location.href + "?id=" + this.info.id,
          "中国数字人知识产权存证保护平台【官方认证】 " + this.info.name,
          this.info.imgUrl
        );
      } else if (index == 3) {
        toWeibo(
          window.location.href + "?id=" + this.info.id,
          "中国数字人知识产权存证保护平台【官方认证】 " + this.info.name
        );
      }
    },
    // 发布平台打开
    open_url(url) {
      if (url != "" && url != null) {
        window.open(url, "_blank");
      }
    }
  }
};
</script>

<style scoped lang="scss">
.center {
  width: 100%;
  height: 100%;
  position: relative;
}
.pop {
  z-index: 99999999;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background-color: rgb(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  &-box {
    width: 1000px;
    height: 521px;
    background: #ffffff;
    margin-top: 298px;
    &-close {
      width: 100%;
      margin-top: 22px;
      margin-bottom: 22px;
      > img {
        float: right;
        margin-right: 22px;
        width: 17px;
        height: 17px;
      }
    }
    &-title {
      width: 100%;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      color: #333333;
    }
    &-input {
      height: 280px;
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      padding: 30px 40px 18px;
      > input {
        display: flex;
        flex-wrap: wrap;
      }
    }
    &-hint {
      padding: 0px 40px;
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 400;
      margin-bottom: 52px;
      > img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      & > p:nth-child(2) {
        color: #3c7bd8;
      }
      & > p:nth-child(3) {
        color: #666666;
      }
    }
    &-but {
      width: 414px;
      height: 66px;
      margin: 0 auto;
      background: linear-gradient(135deg, #3b7ad8, #10a3e4);
      box-shadow: 1px 1px 10px 0px rgba(12, 34, 65, 0.23);
      font-size: 20px;
      font-weight: 400;
      color: #ffffff;
      text-align: center;
      line-height: 66px;
      cursor: pointer;
    }
  }
}
.head {
  width: 100%;
  height: 120px;
  background-color: #3a7bd8;
}
.box {
  max-width: 1920px;
  min-width: 1440px;
  height: 120px;
  margin: auto;
  display: flex;
  &-left {
    padding-left: 2.1%;
    display: flex;
    align-items: center;
    vertical-align: middle;
    width: 29.4%;
    height: 120px;
    cursor: pointer;
    > img {
      width: 100%;
    }
  }
  &-wier {
    width: 1px;
    height: 51px;
    background-color: rgba(247, 244, 244, 0.1);
    margin-top: 35px;
    margin-left: 1.6%;
    margin-right: 1.6%;
  }
  &-centent {
    width: 20%;
    height: 60px;
    margin-top: 30px;
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 3px;
  }
  &-right {
    width: 47.8%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    &-hint {
      // width: 2.8%;
      margin-right: 20px;
      position: relative;

      cursor: pointer;
      > img {
        width: 21px;
        height: 23px;
      }
      &-num {
        width: 23px;
        height: 23px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: red;
        position: absolute;
        border-radius: 50%;
        font-size: 12px;
        font-weight: 500;
        color: #ffffff;
        top: -8px;
        right: -13px;
        border: 3px solid #3c7dd8;
      }
    }

    > p {
      font-size: 18px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
    &-img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      cursor: pointer;
      margin-left: 20px;
      cursor: pointer;
      // margin-right: 60px;
      // outline: 2px solid red;
      overflow: hidden;
    }
  }
}

.main {
  max-width: 1920px;
  min-width: 1440px;
  min-height: 87vh;
  margin: 0 auto;
  background-color: #ebf1fb;
  padding-bottom: 32px;
  position: relative;
  margin: auto;
  &-their {
    width: 100%;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    color: #999999;
    position: absolute;
    bottom: 28px;
  }
  &-box {
    width: 75%;
    margin: 0 auto;
  }
}
.navigation {
  width: 100%;
  height: 66px;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  > img {
    width: 10px;
    height: 10px;
    margin: 0 10px;
  }
  & > p:nth-child(3) {
    color: #3a7bd8;
  }
}
.datum {
  width: 100%;
  background: rgb(255, 255, 255);
  padding: 40px 40px 62px;
  display: flex;
  margin-bottom: 100px;
  &-swpier {
    width: 310px;
    height: 409px;
    // outline: 2px solid red;
    overflow: hidden;
    position: relative;
    > img {
      width: 100%;
    }
    &-left {
      position: absolute;
      left: 0px;
      top: 175px;
      width: 30px;
      height: 60px;
      background-color: rgb(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      cursor: pointer;
      > img {
        width: 14px;
        height: 15px;
      }
    }
    &-right {
      position: absolute;
      right: 0px;
      top: 175px;
      width: 30px;
      height: 60px;
      background-color: rgb(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      cursor: pointer;
      > img {
        width: 14px;
        height: 15px;
      }
    }
    &-center {
      position: absolute;
      left: 135px;
      bottom: 18px;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      z-index: 9999;
      > img {
        width: 100%;
      }
    }
  }
  &-box {
    flex: 1px;
    margin-left: 40px;
  }
}
.name {
  width: 100%;
  padding: 6px 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  &-text {
    width: 69%;
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: bold;
    color: #000000;
    max-width: 780px;
    &-name {
      max-width: 50%;
    }
    &-digit {
      // width: 68px;
      max-width: 50%;
      height: 26px;
      padding: 0 6px;
      background-color: #3a7cd81f;
      text-align: center;
      line-height: 26px;
      font-size: 14px;
      font-weight: 400;
      color: #3a7bd8;
      margin-left: 15px;
      overflow: hidden;
    }
  }
  &-message {
    display: flex;
    align-items: center;

    &-img {
      width: 32px;
      height: 32px;
      background: #ffffff;
      // border: 1px solid #dddddd;
      // padding: 7px;
      margin-right: 20px;

      > img {
        width: 100%;
        cursor: pointer;
      }
    }
    &-but {
      width: 94px;
      height: 32px;
      background-color: #3a7bd8;
      text-align: center;
      line-height: 32px;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
    }
  }
}
.wier {
  width: 100%;
  height: 1px;
  background-color: #dddddd;
}
.id {
  font-size: 18px;
  font-weight: bold;
  color: #3a7bd8;
  margin-top: 30px;
  margin-bottom: 30px;
}
.item {
  display: flex;
  margin: 15px 0px;
  &-box {
    width: 50%;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    padding-right: 40px;
    & > p:nth-child(1) {
      color: #999999;
    }
    & > p:nth-child(2) {
      color: #333333;
    }
  }
  &-big {
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;
    & > p:nth-child(1) {
      color: #999999;
    }
    & > p:nth-child(2) {
      color: #333333;
    }
  }
  &-user {
    width: 100%;
    display: flex;
    align-items: center;
    &-img {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      padding: 7px;
      border: 1px dashed #3a7bd8;
      margin-right: 9px;
      > img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    &-text {
      & > p:nth-child(1) {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
      }
      & > p:nth-child(2) {
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-top: 13px;
      }
    }
  }
}
.leave-word {
  width: 100%;
  &-title {
    font-size: 18px;
    font-weight: bold;
    color: #000000;
  }
  &-down {
    width: 100%;
    display: flex;
    margin-top: 20px;
    margin-bottom: 30px;

    &-img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      > img {
        width: 100%;
        height: 100%;
      }
    }
    &-text {
      flex: 1;
      margin-left: 15px;
      padding-bottom: 30px;
      border-bottom: 1px dotted #dddddd;
      & > p:nth-child(1) {
        font-size: 16px;
        font-weight: 500;
        color: #333333;
        padding: 12px 0;
        display: flex;
        justify-content: space-between;
        span:nth-child(2) {
          font-size: 14px;
          // font-weight: 500;
          color: #999;
          // padding: 12px 0;
          // display: flex;
          // justify-content: space-between;
        }
      }
      & > p:nth-child(2) {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
        line-height: 30px;
      }
    }
  }
}
.share {
  width: 32px;
  height: 32px;
  margin-right: 20px;
  position: relative;
  cursor: pointer;
  > img {
    width: 100%;
  }
  &-box {
    position: absolute;
    width: 266px;
    // height: 266px;
    top: 46px;
    right: 0px;
    background-color: #ffffff;
    box-shadow: -1px 2px 26px 1px rgba(12, 34, 65, 0.11);
    padding: 10px;
    &-item {
      font-size: 16px;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;
    }
    &-item:nth-child(1) {
      padding: 21px 16px 22px;
      border-bottom: 1px solid #dddddd;
      cursor: pointer;
      > img {
        width: 13px;
        height: 13px;
        margin-right: 24px;
      }
    }
    &-item:nth-child(2) {
      margin-top: 23px;
      cursor: pointer;
      > img {
        width: 18px;
        height: 15px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(3) {
      margin-top: 28px;
      cursor: pointer;
      > img {
        width: 13px;
        height: 16px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(4) {
      margin-top: 27px;
      cursor: pointer;
      > img {
        width: 16px;
        height: 16px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
    &-item:nth-child(5) {
      margin-top: 27px;
      cursor: pointer;
      padding-bottom: 8px;
      > img {
        width: 17px;
        height: 14px;
        margin-right: 24px;
        margin-left: 14px;
      }
    }
  }
}
</style>
